<template>
  <!-- 添加群 -->
  <div class="add-group">
    <div class="backbar">
      <div class="back" v-hammer:tap="(ev) => $router.go(-1)">
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>返回</span>
      </div>
    </div>

    <div class="caption flex-center column">
      <div class="icon flexbox align-center justify-around column">
        <img src="@/assets/images/admin.png" alt />
        <div class="title">群管理员</div>
      </div>
      <div class="intro">
        <p>群管理员可以拥有以下能力</p>
        <p>· 删除群成员(群主, 群管理员除外)</p>
        <p>· 同意进群申请</p>
      </div>
    </div>

    <div class="admin-list-wrapper">
      <ul>
        <li @click="onMemberClicked(item, i)" v-for="(item, i) of adminList" :key="i">
          <img :src="item.headUrl" alt class="head-url" />
          <div class="username ellipsis">{{ item.nickname }}</div>
        </li>
        <li class="add-admin" @click="onAddAdmin">
            <div class="image-wrapper flex-center">
            <img src="@/assets/icons/plus_add.svg" alt />
          </div>
        </li>
        <li class="delete-admin" @click="onDeleteAdmin" v-if="adminList.length > 0">
          <div class="image-wrapper flex-center">
            <img src="@/assets/icons/minus.svg" alt />
          </div>
        </li>
      </ul>
    </div>

    <add-admin class="add-admin-wrapper" 
    @hide="showAddAdmin = false" v-if="showAddAdmin" :thisList="thisList" :type="opType" />
  </div>
</template>

<script lang="ts">
import { Action, Mutation, namespace } from 'vuex-class';
import { Component, Vue, Prop } from "vue-property-decorator";
import MessageMixin from '@/mixins';
import { MsgTypeKV } from '@/api/socket/imClient';
import { Webim } from '@/utils/types';
import { map } from 'lodash';
import Cookie from 'js-cookie';
declare const $Vue: Vue;
declare const webim: Webim;
const chatModule = namespace('chatModule');
const userModule = namespace('userModule');
@Component<AssignAdmin>({
  mixins: [MessageMixin],
})
export default class AssignAdmin extends Vue {

  @userModule.State("groupMembers") groupMembers: any;

  private groupNick: string = '';
  private showAddAdmin: boolean = false;
  // 1 添加 2删除
  private opType: number = 1;

  // private adminList: Array<any> = [];
  private adminIds: Array<any> = [];

  private eventList: Array<string> = [
    // "$getAdminList",
  ];

  private thisList: Array<any> = [];

  private memberList: Array<any> = [];

  private getMemberList() {
    return this.groupMembers.filter((item) => {
      return this.adminIds.indexOf(Number(item.userId)) === -1;
    });
  }

  private get adminList() {
    this.adminIds = [];
    let list = this.groupMembers.filter((item) => {
      if (item.status !== 3) {
        this.adminIds.push(Number(item.userId));
      }
      return item.status === 2;
    });
    return list;
  }

  protected mounted() {
    this.initEvents(this.eventList);
    this.memberList = this.getMemberList();
    this.thisList = this.memberList.slice();
  }

  private onCancel() {
    this.$router.go(-1);
  }

  private onAddAdmin() {
    this.showAddAdmin = true;
    this.opType = 1;
    this.thisList = this.memberList.slice();
  }

  private onDeleteAdmin() {
    this.showAddAdmin = true;
    this.opType = 2;
    this.thisList = this.adminList.slice();
  }

/**
 * 跳转到用户信息
 */
  private onMemberClicked(item: any, i: number) {

  }

  /**
   * 根据群号搜索群设置信息
   */
  private $getAdminList(data: any) {
    if (data.result === 0) {
      this.adminIds = map(data.adminList, (item) => {
        
      });
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }
}
</script>

<style lang="stylus" scoped>
.add-group
  width 100%
  height 100%
  background #fff
  padding 2px 
  box-sizing border-box
  .icon
    flex-basis 10%
  
.action
  height 40px
  width 100%
  display flex
  justify-content space-between
  align-items center
  padding 4px
  box-sizing border-box
  background #f1f1f1
  .item 
    min-width 64px
    height 100% 
    line-height 100% 
    &.send 
      background rgb(87, 189, 109)
      border-radius 4px
      color white

.admin-list-wrapper
  display flex 
  justify-content center
  ul
    width 100%
    display flex
    justify-content flex-start
    align-items flex-start
    flex-wrap wrap
    padding 8px 
    box-sizing border-box
    li 
      margin 9px
      margin-bottom 16px
      width 52px
      height 52px
      img 
        width 95% 
        height 95%
      .head-url
        width 90%
        height 90%
        border-radius 4px
      .username 
        font-size 12px
        color #898989
        margin-top 2px
      &.add-admin, &.delete-admin
        border 0.8px solid #eee

.caption
  width 100% 
  height 200px
  padding 10px
  border-bottom 0.8px solid #eee
  .icon 
    flex-basis 60%
    width 100% 
    img 
      width 60px 
    .title 
      font-size 18px 
  .intro 
    flex-basis 40%
    width 100% 
    font-size 13px 
    color #909090
    text-align left
    p 
      margin-top 10px

.add-admin-wrapper
  position fixed 
  z-index 999 
  width 100% 
  height 100% 
  top 0
  left 0

.add-group 
  position fixed 
  width 100% 
  height 100% 
  top 0
  left 0
</style>

